<template>
	<div id="viewDiv">
		<!-- <el-image
		  style="width: 100px; height: 100px"
		  :src="url"
		  :zoom-rate="1.2"
		  :max-scale="7"
		  :min-scale="0.2"
		  :preview-src-list="srcList"
		  show-progress
		  :initial-index="4"
		  fit="cover"
		/> -->
		
	</div>
	<div class="menu-box">
		<el-button type="success" @click="queryBtn">点击我实现某种属性查询</el-button>
	</div>
</template>

<script setup>
	import { onMounted } from 'vue'
	
	import geosceneConfig from '@geoscene/core/config'	
	import Map from '@geoscene/core/Map'
	import MapView from '@geoscene/core/views/MapView'
	import ScaleBar from '@geoscene/core/widgets/ScaleBar'
	import Legend from '@geoscene/core/widgets/Legend'
	
	import FeatureLayer from "@geoscene/core/layers/FeatureLayer"
	
	/*图片显示的来源*/	
	const url =
	  'https://pic.rmb.bdstatic.com/bjh/250824/beautify/24ec8dfc986b86d14add8638ae8ff41f.jpeg'
	const srcList = [
	  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
	  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
	  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
	  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
	  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
	  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
	  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
	]
	
	let  el_image = '<el-image  style="width: 100px; height: 100px" :src="url" \
			  :zoom-rate="1.2" \
			  :max-scale="7" \
			  :min-scale="0.2" \
			  :preview-src-list="srcList" \
			  show-progress \
			  :initial-index="4" \
			  fit="cover" \
			/> ';
	let el_image2 = "<el-image :src='url' />";		
	
		
	//geosceneConfig.assetsPath = './assets'
	let view, map
	
	onMounted(() => {
	  map = new Map({
	    //basemap: basemapBlue_ArcGIS,
		//basemap: "tianditu-image",
		basemap: "tianditu-vector",
	    //ground: "world-elevation"
	  });
	  
	  // Define a pop-up for Trailheads
	  const popupHN2007LRF = {
	  		  "title": "CXLRFDB2007-河南省2007年LRF指数",
	  		  "content": "<b>区划码:</b> {区划码}<br><b> " + el_image2 + "<b>F1字段信息:</b><a href='https://pic.rmb.bdstatic.com/bjh/250824/beautify/24ec8dfc986b86d14add8638ae8ff41f.jpeg' target='_self'><img width='80' height='100' src='https://pic.rmb.bdstatic.com/bjh/250824/beautify/24ec8dfc986b86d14add8638ae8ff41f.jpeg' /> </a> {F1}<br><b>Cross Street:</b> {X_STREET}<br><b>Parking:</b> {PARKING}<br><b>Elevation:</b> {ELEV_FT} ft"
	  }
	  // 公园和广场 (polygons)
	  const CXLRFDB2007_FeatureLayer = new FeatureLayer({
	      url: "https://gis25.jlu3s.com/server/rest/services/XH/2007CXLRFDB/FeatureServer/0",
		  outFields: ["*"],
		  popupTemplate: popupHN2007LRF
	  });
	  map.add(CXLRFDB2007_FeatureLayer, 0);
	  
	  const view = new MapView({
	      map: map,
	      center: [111.4, 37.9], // Longitude, latitude
	      zoom: 4, // Zoom level
	      container: "viewDiv" // Div element
	  });
	  
	  
	  
	  
	  const scalebar = new ScaleBar({
	      view: view  
	  });	  
	  view.ui.add(scalebar, "bottom-left");
	  
	  const legend = new Legend ({
	      view: view
	  });
	  view.ui.add(legend, "top-right");	
	 
	})
	
	const queryBtn = () =>{
		alert("dianjiwole,hahaha")
	}
</script>

<style scoped>
	/* @import "https://js.geoscene.cn/4.29/@geoscene/core/assets/geoscene/themes/light/main.css"; */
	html,
	body,
	#viewDiv {
		padding: 0;
		margin: 0;
		height: 100%;
		width: 100%;
	}
	
	.demo-image__error .image-slot {
	  font-size: 30px;
	}
	.demo-image__error .image-slot .el-icon {
	  font-size: 30px;
	}
	.demo-image__error .el-image {
	  width: 100%;
	  height: 200px;
	}
	
	.menu-box {
		background-color: aqua;
		width:300px;
		height:60px;
		position: absolute;
		top:120px;
		left: 200px;
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		align-items: center;
	}
</style>